<template>
  <div class="app-container">
    <div class="logo">
      <icon-svg v-if="Themes === 'white'" icon-class="yinyue" />
      <icon-svg v-else-if="Themes === 'black'" icon-class="yinyue2" />
      <span class="title">S1mple</span>
    </div>

    <div class="select-type">
      <div class="email" :class="isEmail ? 'active' : ''" @click="isEmail = true">邮箱登录</div>
      <div class="phone" :class="isEmail ? '' : 'active'" @click="isEmail = false">手机号登录</div>
    </div>

    <div class="input-wrapper">
      <div class="input email-input" v-show="isEmail">
        <input v-model="Data.email" @focus="focusEmail=true" @blur="focusEmail=false" :placeholder="focusEmail ? '' : '请输入电子邮箱'">
      </div>
      <div class="input phone-input" v-show="!isEmail">
        <input v-model="Data.phone" @focus="focusPhone=true" @blur="focusPhone=false" :placeholder="focusPhone ? '' : '请输入手机号'">
      </div>

      <div class="input password-input">
        <input v-model="Data.password"
               @focus="focusPassword=true"
               @blur="focusPassword=false"
               :placeholder="focusPassword ? '' : '请输入密码'"
               :type="showPassword ? 'text' : 'password'"
        >
        <span class="right-icon"  @click.stop="showPassword=!showPassword">
          <icon-svg v-show="showPassword" icon-class="hide" />
          <icon-svg v-show="!showPassword" icon-class="view" />
        </span>
      </div>
    </div>

    <div class="btn-container">
      <BKButton class="login-btn" block @click="Login">登 录</BKButton>
    </div>

    <router-link to="/recommend" custom v-slot="{navigate}">
      <div class="jump-login" @click="navigate">跳过登录</div>
    </router-link>

    <button class="" @click="handleCaptcha">验证码</button>

    <transition name="slide">
      <LoadingPage v-if="Loading" />
    </transition>

  </div>
</template>

<script>
import BKButton from 'components/bk-button'
import LoadingPage from 'components/LoadingPage'
import {EmailLoginAsync, PhoneLoginAsync, SendCaptcha} from 'api/login'

export default {
  name: 'login',
  data () {
    return {
      Loading: false,
      Data: {
        email: '',
        phone: '',
        password: ''
      },
      isEmail: true,
      isCaptcha: true,
      focusEmail: false,
      focusPhone: false,
      focusPassword: false,
      showPassword: false
    }
  },
  mounted () {
    if (process.env.NODE_ENV === 'development') {
      this.Data.email = 'sh731928441@163.com'
      this.Data.password = 'sh1230'
    }
  },

  methods: {
    navigate (e) {
      console.log(e)
    },
    Login () {
      this.Loading = true
      this.isEmail
        ? EmailLoginAsync({email: this.Data.email, password: this.Data.password}).then(this.LoginSuccess).catch(this.LoginFail)
        : PhoneLoginAsync({phone: this.Data.phone, password: this.Data.password}).then(this.LoginSuccess).catch(this.LoginFail)
    },
    LoginSuccess (res) {
      const cookies = res.cookie.split(';;')
      cookies.forEach(item => {
        document.cookie = item
      })

      const { profile } = res
      const user = Object.assign({}, this.$store.state.user, {
        name: profile.nickname,
        avatar: profile.avatarUrl,
        userId: profile.userId,
        backgroundImg: profile.backgroundUrl
      })

      this.$store.dispatch('change_state', { key: 'user', value: user })
      this.$store.dispatch('user/getUserPlayList')
      this.$store.dispatch('user/getLikeList')

      setTimeout(() => {
        this.Loading = false
        this.$router.replace(this.$route.query.redirect || '/')
      }, 2000)
    },
    LoginFail (err) {
      setTimeout(() => {
        this.$toast.fail(err.msg || err.message || '登录失败！')
        this.Loading = false
      }, 1500)
    },
    handleCaptcha () {
      SendCaptcha(this.Data.phone).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  watch: {
    isEmail () {
      this.Data.password = ''
      this.isCaptcha = false
    },
    isCaptcha () {
      this.isEmail = false
    },
    focusPassword (value) {
      console.log(value)
    }
  },
  computed: {
    Themes () {
      return this.$store.state.Themes
    }
  },
  components: { BKButton, LoadingPage }
}
</script>

<style lang="less" scoped>
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .app-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
  }

  .logo {
    margin-top: -50px;
    .icon-svg { font-size: 48px }
    .title {
      font-size: 48px;
      .logo-font();
    }
  }
  .select-type {
    margin-top: 25px;
    padding: 0 40px;
    height: 48px;
    display: flex;
    div {
      line-height: 46px;
      flex: 1;
      border-top: 1px solid @color-hl-background-2;
      border-bottom: 1px solid @color-hl-background-2;
    }
    div:first-child {
      border: 1px solid @color-hl-background-2;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    div:last-child {
      border-right: 1px solid @color-hl-background-2;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    div.active { background: @color-hl-background-2 }
  }
  .input-wrapper {
    padding: 0 40px;
    /*border: 1px solid red;*/
    .input {
      margin-top: 25px;
      height: 44px;
      background: @color-base;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      position: relative;
      input {
        width: 100%;
        padding: 0 45px;
        text-align: center;
        background: transparent;
        color: @color-text;
      }
      .right-icon {
        padding: 10px;
        position: absolute;
        right: 0;
      }
    }
  }
  .btn-container {
    margin-top: 25px;
    padding: 0 40px;
    .login-btn {
      height: 44px;
      background: @color-theme;
      color: #fff;
      font-size: 18px;
      border-radius: 20px;
    }
  }
  .jump-login {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    color: ;
  }

  .slide-enter-active, .slide-leave-active { transition: transform .3s }
  .slide-enter {
    transform: translateX(100%)
  }
  .slide-leave-to {
    transform: translateX(-100%)
  }
</style>
